<template>
  <div
    :class="flexClass"
    v-on="$listeners"
  >
    <slot />
  </div>
</template>

<script>
export default {
  props: {
    inline: {
      type: Boolean,
      default: false
    },
    direction: {
      type: String,
      default: '',
      validator: value => {
        return ['', 'row', 'row-reverse', 'column', 'column-reverse'].indexOf(value) !== -1
      }
    },
    wrap: {
      type: String,
      default: '',
      validator: value => {
        return ['', 'nowrap', 'wrap', 'wrap-reverse'].indexOf(value) !== -1
      }
    },
    justify: {
      type: String,
      default: '',
      validator: value => {
        return ['', 'start', 'end', 'center', 'between', 'around'].indexOf(value) !== -1
      }
    },
    align: {
      type: String,
      default: '',
      validator: value => {
        return ['', 'start', 'end', 'center', 'baseline', 'stretch'].indexOf(value) !== -1
      }
    },
    prefixCls: {
      type: String,
      default: 'flex'
    }
  },
  computed: {
    flexClass () {
      return [
      this.inline ? `${this.prefixCls}-inline` :`${this.prefixCls}`,
      this.direction ? `${this.prefixCls}-dir-${this.direction}`: '',
      this.wrap ? `${this.prefixCls}-${this.wrap}`: '',
      this.justify ? `${this.prefixCls}-justify-${this.justify}`: '',
      this.align ? `${this.prefixCls}-align-${this.align}`: ''
    ]
    }
  }
}
</script>

<style lang="stylus" scoped>
@import './flex.styl'
</style>
